STEP 1

更換背景圖片

下載並導入 Pixel Skies DEMO Background pack 素材

➔ 從 Pixel Skies DEMO 資料夾中選擇一個適當的天空圖片拖曳至 Hierarchy 介面中

➔ 將新增的圖片素材調整至適當位置即可

背景素材選用 1920 X 1080 px ( Full HD ) 大小的圖片。

STEP 2

Unity 中文字體與字型設定

將下載好的 俐方體 11 號字體 拖曳至 UI 資料夾中

➔ 於視窗頂端工具列中 點擊 Window ➔ 選擇 TextMeshPro ➔ 點選 Font Asset Creator

➔ 在 Source Font File 欄位選擇 Cubic_11_1.010_R 字體

➔ 在 Sampling Point Size 欄位選擇 Auto Sizing

➔ 在 Atlas Resolution 欄位選擇 8192 / 8192

➔ 在 Character Set 欄位選擇 Custom Characters

➔ 將以下連結中的中英文字複製貼近 Custom Character List 欄位中

➔ 點擊 Generate Font Atlas ➔ 完成後再點擊 Save 儲存至 UI 資料夾中即可

中英文字庫連結｜中文字庫 、 英文字庫

💡古古的課程補充
若想將剛儲存好的字體設定應用到 TextMeshPro 上，只需要將 Font Asset 欄位
修改為該字體樣式即可。

STEP 3

圖檔匯入與實作功能

將所需要的圖檔（ 參考畫面、 UI 按鈕等）拖曳至 UI 資料夾中

➔ 將剛匯入的圖檔全選，並修改 Texture Type 欄位為 Sprite (2D and UI)

➔ 對 Canvas 點擊右鍵 ➔ 選擇 UI ➔ 點選 Image

➔ 將所需的圖片拖曳至 Source Image 欄位中，並點擊 Set Native Size

➔ 將圖片調整至適當大小與位置即可

示意圖以首頁畫面為例

💡古古的小提醒：
將 Start 按鈕圖片貼上後，記得要將原先 Start 按鈕物件中的 Button Component
複製並貼上至新的 Start 按鈕圖片當中才能保有原本的按鈕功能喔！

專案建置與部署

專案建置須知

✦ itch.io

itch.io

將 Unity 專案上傳至 itch.io 經驗談 - 企業職場 - TechNice科技島-掌握科技與行銷最新動態

✦ WebGL

[2020] 輕鬆製作網頁遊戲 – Unity 輸出WebGL並掛在Git Hub

Unity 之 发布WebGL并部署到GitHub供外部访问 (Unity | WebGL | GitHub | 内嵌网页）_unity打开gitblit-CSDN博客

✦ MagicaVoxel

MagicaVoxel

專案建置練習

試著透過以下步驟，將完成的 SuperNewJeans 專案依據目標平台的差異，建置出不同的專案成果。

STEP 1

Unity 環境建置

開啟 Unity Hub ➔ 點擊 Install ➔ 點擊 齒輪 ➔ 點選 Add modules

➔ 勾選 iOS Build Support 及 WebGL Build Support 並點擊 Install

STEP 2

Windows, Mac, Linux 版本的專案建置與輸出設定

開啟 SuperNewJeans 專案 ➔ 於視窗頂端工具列中 點擊 File

➔ 點選 Build Settings ➔ 選擇 Windows, Mac, Linux 選項

➔ 點擊 Player Settings ➔ 開啟 Resolution and Presentation 選單

➔ 取消勾選 Default Is Native Resolution 欄位，並將長寬比設定為 1920x1080

➔ 點擊 Build 並將檔案命名為 SuperNewJeans後點擊 Save 儲存專案即可

示意圖為輸出後之 Mac版本 遊戲畫面

STEP 3

WebGL 版本的專案建置與輸出設定

開啟 Build Settings 視窗 ➔ 選擇 WebGL 選項

➔ 點擊 Switch Platform ➔ 點擊 Player Settings

➔ 開啟 Publishing Settings 選單

➔ 將 Compression Format 欄位由 Gzip 修改 Disabled

➔ 點擊 Build 並將檔案命名為 SuperNewJeansWeb 後點擊 Save 儲存專案即可

點擊 index.html 開啟網頁版遊戲畫面

示意圖為輸出後之 WebGL版本 遊戲畫面